<template>
	<view class="" :style="[AppSkinVar]">
		<view class="header"></view>
		<view class="form-body bg-white e-p-l-60 e-p-r-60 e-p-t-60">
			<view class="e-flex e-flex-xy-center">
				<image :src="logo" mode="aspectFit" class="e-m-b-106 e-m-t-60 image-133"></image>
			</view>
			<button class="sub-btn bg-primary e-m-b-40 c-white e-flex e-flex-xy-center" @tap="submit(1)">
				<image class="img-40" src="./static/android.png" mode=""></image>
				<!-- #ifdef H5 -->
				<text class="e-m-l-40">{{ $t('public.安卓下载') }}</text>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<text class="e-m-l-40">复制安卓下载链接</text>
				<!-- #endif -->
			</button>
			<button class="sub-btn bg-primary c-white e-flex e-flex-xy-center" @tap="submit(2)">
				<image class="img-40" src="./static/apple.png" mode=""></image>
				<!-- #ifdef H5 -->
				<text class="e-m-l-40">{{ $t('public.iPhone下载') }}</text>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<text class="e-m-l-40">复制iPhone下载链接</text>
				<!-- #endif -->
			</button>
		</view>
		<e-popup :show="show" mode="top" @close="show = false">
			<view class="popup-box">
				<image src="/pages/invite/static/app-tips.png" mode="aspectFit"></image>
			</view>
		</e-popup>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { getAppVersion } from '@/common/request/api';
import { throttle, getWebBrowser } from '@/common/utils';
import { useCurrentInstance } from '@/common/hooks';

const ctx = useCurrentInstance();

const logo = uni.getStorageSync('logo') || '';
const show = ref(false);
let appAndroidUrl = '';
let appIosUrl = '';

getAppVersion().then((res) => {
	appAndroidUrl = res.data.appAndroidUrl;
	appIosUrl = res.data.appIosUrl;
});

const submit = throttle(function (type: number) {
	const url = type === 1 ? appAndroidUrl : appIosUrl;
	// #ifdef H5
	if (getWebBrowser('wx')) {
		show.value = true;
	} else {
		window.open(url);
	}
	// #endif
	// #ifndef H5
	ctx.$copy(url);
	// #endif
}, 1000);
</script>

<style lang="scss">
.header {
	width: 100vw;
	height: 480rpx;
	background-image: url('./static/invite-register-header.png');
	background-size: 100%;
}
.form-body {
	border-radius: 40rpx 40rpx 0px 0px;
	margin-top: -30rpx;
	min-height: calc(100vh - 460rpx);
	padding-bottom: 20rpx;
}
.sub-btn {
	height: 90rpx;
	border-radius: 45rpx;
}
.image-133 {
	height: 133rpx;
}
.e-m-b-106 {
	margin-bottom: 106rpx;
}
.popup-box {
	image {
		width: 332rpx;
		height: 278rpx;
		position: fixed;
		top: 40rpx;
		right: 24rpx;
	}
}
</style>
